<template>
  <div class="userList">
    <div class="header">
      <el-row>
        <el-col :span="22">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>

        </el-col>
        <el-col :span="2">
          <el-button type="success" size="mini" @click="addUser">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table height="69vh" :data="list" stripe :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%" fit>
      <el-table-column prop="packCode" label="编码" />
      <el-table-column prop="packName" label="名称" />
      <el-table-column prop="amount" label="价格" show-overflow-tooltip />
      <el-table-column prop="unit" label="单位" show-overflow-tooltip />
      <el-table-column prop="amount" label="物料组成" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope" style="cursor:pointer;color:#3d4e" @click="lookDetail(scope.row)">查看详情</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
        <template slot="header">
          <el-input clearable @keyup.enter.native="getSearch" @input="getSearch" v-model="para.searchVal" size="mini" prefix-icon="el-icon-search" placeholder="请输入" />
        </template>
      </el-table-column>
      <!-- <el-table-column width="200" label="操作">
        <template slot="header">
          <el-input clearable @keyup.enter.native="getSearch" @input="getSearch" v-model="para.searchVal" size="mini" prefix-icon="el-icon-search" placeholder="请输入" />
        </template>
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination :page-size="10" :pager-count="11" layout="prev, pager, next" @current-change="currentChange" :total="total">
    </el-pagination>
    <add ref="add" />
    <materCompont ref="materCompont" />
  </div>
</template>

<script>
import { packRecordList } from "../../network/business";
import add from "./components/add";
import materCompont from "./components/materCompont";
export default {
  name: "index",
  components: {
    add,
    materCompont,
  },
  data() {
    return {
      dialogFormVisible: false,
      total: 1,
      list: [],
      para: {
        pageNum: 1,
        pageSize: 10,
        searchVal: "",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    lookDetail(row) {
      this.$refs.materCompont.list = row.materials;
      this.$refs.materCompont.srcList = row.materials.map((item) => item.img);
      this.$refs.materCompont.dialogVisible = true;
    },
    getSearch() {
      this.para.pageNum = 1;
      this.getList();
    },
    currentChange(val) {
      this.para.pageNum = val;
      this.getList();
    },
    del(row) {
      console.log(row, "row");
      this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
    addUser() {
      this.$refs.add.title = "新增商品";
      this.$refs.add.dialogFormVisible = true;
    },
    getList() {
      packRecordList(this.para).then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          this.list = res.data.content;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog {
  width: 30%;
  border-radius: 5px;
}
.back {
  border-radius: 20px;
  display: inline-block;
  height: 200px;
  display: flex;
  &:hover {
    cursor: pointer;
  }
  img {
    width: 100%;
    height: 100%;
  }

  align-items: center;
  text-align: center;
  justify-content: center;
  width: 200px;
  background-color: #f3f3f3;
  .el-icon-folder-add {
    font-size: 40px;
  }
}
</style>